<template>
  <div class="main-message">
    <el-form ref="form" v-model="allInfo">
      <!--      按钮区域-->
      <div class="btnlayout">
        <div><top-bar :father="father" @filterMessage="filterMessage" /></div>
      </div>
      <!--      -->
      <div class="wrapper">
        <div class="left">
          <card v-if="isShow.baseMessage.self">
            <div slot="cardHeader">基本信息</div>
            <div slot="cardBody"><base-message
              :father="father"
              :is-show="isShow.baseMessage"
              :selected-result="selectedResult"
              :is-pass-value="isPassValue"
              @acquireInfo="acquireInfo"
              @chooseDialog="chooseDialog"
            /></div>
          </card>
        </div>
        <div class="right" v-if="isShow.medicineMessage.self">
          <div class="medicine-message">
            <Card>
              <div slot="cardHeader">药品相关</div>
              <div slot="cardBody"> <medicine-message
                :selected-result="selectedResult"
                :father="father"
                :is-show="isShow.medicineMessage"
                :is-pass-value="isPassValue"
                @acquireInfo="acquireInfo"
                @chooseDialog="chooseDialog"
              /></div>
            </Card>

          </div>
          <div class="sampling-message" v-if="isShow.samplingMessage.self">
            <Card>
              <div slot="cardHeader">抽样相关</div>
              <div slot="cardBody"><sampling-message
                :selected-result="selectedResult"
                :father="father"
                :is-show="isShow.samplingMessage"
                :is-pass-value="isPassValue"
                @acquireInfo="acquireInfo"
                @chooseDialog="chooseDialog"
              /></div>
            </Card>
          </div>

        </div>
      </div>

    </el-form>
    <main-dialog
      :is-visible="isVisible"
      :dialog-info="dialogInfo"
      @closeDialog="closeDialog"
      @selectedResultMain="selectedResultMain"
    />
    <filter-dialog :is-visible="isShowFilterDialog" @changeMyVisible="changeMyVisible" />
  </div>
</template>

<script>
import BaseMessage from './BaseMessage'
import MedicineMessage from './MedicineMessage'
import SamplingMessage from './SamplingMessage'
import MainDialog from '../Dialog/MainDialog'
import TopBar from '../topBar/TopBar'
import FilterDialog from '../Dialog/FilterDialog'
import Card from '../card/Card'
export default {
  name: 'MainMessage',
  components: {
    TopBar,
    BaseMessage,
    MedicineMessage,
    SamplingMessage,
    MainDialog,
    FilterDialog,
    Card
  },
  props: {
    isShow: {
      type: Object,
      default: null
    },
    father: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      allInfo: {
        baseMessageInfo: {},
        medicineMessageInfo: {},
        samplingMessageInfo: {}
      },
      numI: 0, //  用来确认是三个表单的值都传入进来，然后查询
      isVisible: false,
      //  isPassValue当为true的时候，就能够通过子传父将表单值传过来
      isPassValue: false,
      //  保存选择按钮的相关数据
      dialogInfo: {
        type: Object,
        default: null
      },
      // 穿梭框数据
      selectedResult: '',
      // 显示筛选结果的对话框
      isShowFilterDialog: false
    }
  },
  methods: {
    //  保存selectedResult
    selectedResultMain(value) {
      this.selectedResult = value
      this.isVisible = false
    },
    chooseDialog(dialogInfo) {
      this.dialogInfo = dialogInfo
      this.isVisible = true
    },
    closeDialog(value) {
      this.isVisible = value
    },
    //  获取子组件信息
    filterMessage() {
      this.isPassValue = true
    },
    changeMyVisible(value) {
      this.isShowFilterDialog = value
    },
    //  获取查询的条件
    //  需要定义函数进行数据出来，根据后台需要
    acquireInfo(infoName, value) {
      this.numI++
      if (infoName === 'baseMessageInfo') {
        this.allInfo.baseMessageInfo = value
      }
      if (infoName === 'medicineMessageInfo') {
        this.allInfo.medicineMessageInfo = value
      }
      if (infoName === 'samplingMessageInfo') {
        this.allInfo.samplingMessageInfo = value
      }
      if (this.numI === 3) {
        this.numI = 0
        this.isPassValue = false
        this.isShowFilterDialog = true

        // this.$confirm(`此处是${this.father}通过${this.allInfo.baseMessageInfo}获取数据`, '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'success'
        // }).then(() => {
        //   this.$message({
        //     type: 'success',
        //     message: '测试成功!'
        //   })
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消'
        //   })
        // })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .main-message{
    font-size: 12px;
    background-color: #E6EDF5;
    padding-left: 20px;
  }
  .wrapper{
    display: flex;
    flex-wrap: wrap;
    .left{
      flex: 1;
      min-width: 540px;
      padding-right: 20px;
      padding-bottom: 20px;
    }
    .right{
      padding-right: 20px;
      min-width: 540px;
      flex: 1;
      .medicine-message{
        padding-bottom: 20px;
      }
    }
  }

  .base-message div{
    margin-bottom: 5px;
  }
</style>
